<template>
  <el-form ref="form" :model="distributeForm" :rules="rules" label-width="100px">
    <el-form-item label="标题：" prop="title">
      <el-input
        v-model.trim="distributeForm.title"
        placeholder="请输入标题"
        maxlength="20"
        show-word-limit
        @keyup.native="addTitle"
      />
    </el-form-item>
    <el-form-item label="内容：" prop="content">
      <div class="message-send-area">
        <div class="text-area">
          <div id="edit-area" contenteditable="true" class="edit-area">
            <el-input
              v-model="distributeForm.content"
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              maxlength="600"
              @keyup.native="addContent"
            />
          </div>
          <div class="edit-toolbar">
            <div class="emotion">
              <a>
                <i />
              </a>
              <div class="emotions">
                <div id="emotions-inner">
                  <div>
                    <ul>
                      <li v-for="(count,index) in emojiTest.emoji" :key="index" @click="addEmoji(index)">
                        <span>{{ count }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <p>，按下Enter键换行</p>
            <p>
              还可以输入<em>{{ surplus }}</em>字
            </p>
          </div>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import emojiList from '@/assets/officalAccount/emoji'
import { mapState } from 'vuex'

export default {
  name: 'Character',
  props: {
    contentType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur', maxlength: 600 }]

      },
      emojiTest: {}
    }
  },
  computed: {
    ...mapState({
      distributeForm: state => state.distribute.distributeForm
    }),
    surplus() {
      return 600 - this.form.content.length
    }
  },
  created() {
    this.emojiTest = emojiList
  },
  mounted() {
    this.$store.commit('distribute/SET_CONTENTTYPE', this.contentType)
  },
  methods: {
    addEmoji(id) {
      const emoji = this.emojiTest.emoji[id]
      this.form.content += emoji
    },
    addTitle() {
      // this.$store.commit('distribute/SET_TITLE', this.form.title)
    },
    addContent() {
      // this.$store.commit('distribute/SET_CONTENT', this.form.content)
    },
    // 子组件校验表单
    validataForm(callBack, formData) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // console.log("formData",formData)
          callBack(formData)
          return true
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a,button {
  cursor: pointer;
}

.hide {
  display: none;
}
.message-send-area {
  border: 1px solid #E4E8EB;
  background-color: #FFFFFF;
}
.message-send-area .change-sec ul {
  overflow: hidden;
  line-height: 38px;
  background-color: #FFFFFF;
}
.message-send-area .change-sec ul li {
  float: left;
  padding: 0 20px;
  cursor: pointer;
  font-size: 14px;
}
.message-send-area .change-sec ul li::before {
  content: " ";
  display: inline-block;
  width: 22px;
  height: 20px;
  vertical-align: middle;
  margin: -0.2em 5px 0 0;
}
.word-sec::before {
  background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_text4273fb.svg);
}
.pic-sec::before {
  background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_img4273fb.svg);
}
.audio-sec::before {
  background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_audio4273fb.svg);
}
.video-sec::before {
  background-image: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/msg_sender/svg/default/sender_video4273fb.svg);
}
.text-area {
  border-top: 1px solid #E4E8EB;
}
.edit-area {
  padding: 16px 20px;
  outline: 0;
  color: #353535;
  word-wrap: break-word;
  background-color: #FFFFFF;
  height: 184px;
  overflow-y: auto;
  font-size: 14px;
}
.edit-toolbar {
  font-size: 14px;
  padding: 0 20px;
  line-height: 36px;
  background-color: #FFFFFF;
  border-top: 1px solid #E4E8EB;
}
.emotion {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  font-size: 14px;
}
.emotion:hover .emotions {
  display: block;
}
.emotion a {
  float: left;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  cursor: pointer;
}
.emotion a i {
  background: transparent url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/reply/images/icon_emotion4510e1.svg) no-repeat 0 0;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
}
.edit-toolbar p {
  float: right;
  color: #9A9A9A;
}
.edit-toolbar p em {
  font-style: normal;
  margin: 0 3px;
}

.emotions {
  width: 396px;
  padding: 5px;
  left: 50%;
  margin-left: -46px;
  top: 100%;
  //position: absolute;
  z-index: 500;
  text-align: left;
  color: #353535;
  line-height: 1.6;
  white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  display: none;
}
#emotions-inner {
  position: relative;
  padding: 24px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
#emotions-inner::before {
  position: absolute;
  left: 42px;
  top: -4px;
  content: " ";
  width: 8px;
  height: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 -10px 15px 0 #D4D4D4;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}
#emotions-inner ul {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#emotions-inner ul li {
  float: left;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 0;
  text-align: center;
  background-color: #FFFFFF;
}
#emotions-inner ul li span {
  font-size: 16px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  /* background: transparent url(../assets/icon_emotion_panel.2x4be7aa.png) no-repeat 0 0; */
  /* background-size: 20px auto; */
}
.tool-bar {
  margin-top: 40px;
  padding-bottom: 65px;
}
.tool-bar button {
  margin-right: 1.2em;
  display: inline-block;
  padding: 0 22px;
  min-width: 54px;
  line-height: 2.42857143;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  box-sizing: content-box;
}
.save-btn {
  background-color: #07C160;
  border-color: #07C160;
  color: #FFFFFF;
}
.delete-btn-sec {
  position: relative;
  display: inline-block;
}
.delete-btn {
  background-color: #F5F6F6;
  border-color: #E4E8EB;
  color: #CCCDCD;
}
.hide-delete-sec {
  right: 50%;
  margin-right: -38px;
  top: 100%;
  padding-top: 5px;
  width: 280px;
  position: absolute;
  z-index: 500;
  text-align: left;
  color: #353535;
  line-height: 1.6;
  white-space: normal;
  word-wrap: break-word;
  font-size: 14px;
}
.delete-sec-inner {
  position: relative;
  padding: 24px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.delete-sec-inner::before {
  right: 42px;
  top: -4px;
  content: " ";
  width: 8px;
  height: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 -10px 10px 0 #D4D4D4;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}
.delete-inner-button {
  margin-top: 24px;
  text-align: center;
}
.delete-inner-button button {
  margin: 0 7px;
  display: inline-block;
  padding: 0 22px;
  min-width: 54px;
  line-height: 2.42857143;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  box-sizing: content-box;
}
.determine {
  background-color: #07C160;
  border-color: #07C160;
  color: #FFFFFF;
}
.cancle {
  background-color: #FBFBFB;
  border-color: #E4E8EB;
  color: #353535;
}

</style>
